<template>
  <el-menu :collapse="false"
  background-color="#2a2a33"
  text-color="#fff"
  active-text-color="yellow"
    router
    :default-active="activeMenu"
  >

    <el-menu-item index="/admin">主页（后台首页）</el-menu-item>
    <el-menu-item index="/home">前台首页</el-menu-item>

    <el-sub-menu index="3">
      <template #title>用户管理</template>
      <el-menu-item index="/admin/index/user">用户列表</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="4" class="size">
      <template #title>商品管理</template>
      <el-menu-item index="4-1">商品分类管理</el-menu-item>
      <el-menu-item index="4-2">商品列表</el-menu-item>
      <el-menu-item index="4-3">轮播图管理</el-menu-item>
      <el-menu-item index="4-4">订单管理</el-menu-item>
    </el-sub-menu>

    <el-menu-item index="5">营收管理</el-menu-item>
    <el-menu-item index="6">文件管理</el-menu-item>
  </el-menu>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router"


const route=useRoute();

const activeMenu = computed(() => {
  return route.path
})
</script>

<style >
.el-menu {
  width: 18%;
  height: 100%;
}
.el-menu-item,
.el-sub-menu__title {
  font-size: 18px !important;
}
.el-menu--inline .el-menu-item {
  padding-left: 50px !important; 
}
.el-sub-menu__title *{
  color: white ;
}
</style>